@import './modules/reset.scss';
@import './modules/header.scss';
@import './modules/footer.scss';
body{
    width: 100%;
    background-color: #FAFAFA;
}
.wrap{
    margin: auto;
    .lunbo{
        width: 100%;
        height: 780px;
        position: relative;
        img{
            width: 100%;
            height: 100%;
            // display: none;
        }
        
        
    }
    .introduce{
        margin: 10px auto;
        width: 100%;
        // min-height:910px ;
        
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        div{
            width: 49%;
            margin-bottom: 10px;
            height: calc(width*0.62);
            position: relative;
            img{
                width: 100%;
            }
            p{
                width: 100%;
                margin-top: 7%;
                font-size: 28px;
                font-weight: 500;
                position: absolute;
                text-align: center;
            }
            div.orderNow{
                width: 150px;
                height: 40px;
                position: absolute;
                background-color: #fefefe;
                box-sizing: border-box;
                font-weight: 500;
                font-size: 16px;
                line-height: 40px;
                text-align: center;
                border: 2px black solid;
                border-radius: 20px 0;
                left: 0;
                right: 0;
                margin: auto;
                top:23%
            }
            div.orderNow:hover{
                background-color: #202020;
                color: #fefefe;
            }
            a:visited{
                color:black;
            }
        }
        div:nth-child(2){
            background-color: black;
            img{
                width: 250px;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }
        }
        div:nth-child(3){
            background-color: white;
        }
        div:nth-child(4){
            background-color: #3FE674;
        }
    }
    .productAd{
        width: 100%;
        height: 500px;
        // background-color: gold;
        display: flex;
        margin-bottom: 60px;
        justify-content: space-between;
        div{
            width: 24%;
            height: 500px;
            // background-color: pink;
            cursor: pointer;
            display: flex;
            overflow: hidden;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            img{
                margin-top: 70px;
                width: 272px;
                height: 204px;
            }
            div.goNow{
                width: 150px;
                height: 40px;
                // position: absolute;
                background-color: #fefefe;
                box-sizing: border-box;
                font-weight: 500;
                font-size: 16px;
                line-height: 40px;
                text-align: center;
                border: 2px black solid;
                border-radius: 20px 0 ;
                margin-top: -49px;
            }
            p{
                font-size: 21px;
                font-weight: 500;
            }
            div.goNow:hover{
                background-color: #202020;
                color: #fefefe;
            }
            
        }
        div:first-child{
            background-color: white;
            color: black;
            div.goNow{
                background-color: white;
                color: black;
            }
            div.goNow:hover{
                background-color:black;
                color: white;
            }
        }
        div:nth-child(2){
            background-color: #3FE674;
            
            div.goNow{
                background-color: #3FE674;
                color: black;
            }
            div.goNow:hover{
                background-color: black;
                color: white;
            }
        }
        div:nth-child(3){
            background-color: #303030;
            color: white;
            div.goNow{
                background-color: #303030;
                border-color: white;
            }
            div.goNow:hover{
                background-color:white;
                color: black;
            }
        }
        div:last-child{
            background-color: black;
            color: white;
            div.goNow{
                background-color: black;
                border-color: white;
            }
            div.goNow:hover{
                background-color:white;
                color: black;
            }
        }
    }
}
